<template>
  <div class="boxs">
    <!-- <el-button type="success" @click="addListBtn">添加</el-button> -->
    <div class="formbox">
      <el-form
        ref="productForm"
        :model="product"
        :rules="rules"
        label-position="left"
        label-width="100px"
        class="demo-product"
      >
        <el-form-item label="产品名称：" prop="name">
          <el-input v-model="product.name"></el-input>
        </el-form-item>
         <el-form-item label="品牌：" prop="brandName">
           <el-input v-model="product.brandName"></el-input>
        </el-form-item>
        <el-form-item label="企业名称：" prop="manufacture">
          <el-input v-model="product.manufacture"></el-input>
        </el-form-item>
        <el-form-item label="规格：" prop="productSpec">
          <el-input v-model="product.productSpec"></el-input>
        </el-form-item>
        <el-form-item label="商品条码：" prop="gbCode">
          <el-input v-model="product.gbCode"></el-input>
        </el-form-item>
        <el-form-item label="产地：" prop="address">
          <el-input v-model="product.address"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="desc">
            <el-upload
              class="upload-demo"
              action="#"
              ref="upload"
              :multiple="true"
              accept="image/jpeg,image/jpg,image/png"
              :auto-upload="false"
              :on-preview="handlePreview"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
      
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('product')"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
    import { addList} from  '@/apis/modules/productList'
    import { ref, reactive, onMounted, toRefs ,unref ,getCurrentInstance} from "vue";
    export default {
      setup() {
        const { proxy } = getCurrentInstance()
        const productForm = ref(null)
        const state = reactive({
          product: {
            name: "", // 产品名称 
            brandName: '', // 品牌
            manufacture:"", // 企业名称
            productSpec:'', // 规格
            gbCode: '', // 商品条码
            address: '', //  产地
          },
          dialogImageUrl: '',
          disabled: false,
          fileList: []
        });
        const rules = {
          name: [
            { required: true,  message: "请输入产品名称",  trigger: "blur", },
          ],
          brandName: [
            {  required: true,  message: "请输入品牌：",  trigger: "blur", },
          ],
          manufacture: [
            { required: true, message: "请输入企业名称",  trigger: "blur",},
          ],
          productSpec: [
            { required: true, message: "请输入规格", trigger: "blur", },
          ],
          gbCode: [
            { required: true,message: "请输入商品条码",trigger: "blur",},
          ],
          address: [
            { required: true, message: "请输入产地", trigger: "blur",},
          ],
        };
        const addListBtn = () => {
          console.log(state.productData);
        };
        const submitForm = async() =>{
          // console.log(productForm)
          const form = unref(productForm)
          if (!form) {
              return
          }
          await form.validate()
          
        }
        const handleRemove= (file, fileList) => {
          console.log(proxy)
          console.log(fileList)
          proxy.$message({
            type: 'info',
            message: '已删除原有图片',
            duration: 1000
          });
        }
        const handlePreview  =(file) => {  //  放大查看
          console.log('handlePreview')
          // this.dialogImageUrl = file.url;
          // this.dialogVisible = true;
        }
        const handleChange=(file,fileList) =>{
          state.fileList = fileList;
        }
        return {
          addListBtn,
          ...toRefs(state),
          productForm,
          submitForm,
          handleRemove,
          rules,

          handlePreview,
          handleChange

        };
      },
    };
</script>
<style lang="scss" scoped>
.boxs{
  .formbox{
    margin:2% 2% 0 2%;
  }
}
</style>